<template>
  <div class="el-form-item">
    <label v-if="label">{{ label }}</label>
    <slot />
    <p
      v-if="error"
      class="error"
    >
      {{ error }}
    </p>
  </div>
</template>

<script lang="ts">
export default {
  name: "ElFormItem"
};
</script>
<script lang="ts" setup>
import Schema from "async-validator";
import { onMounted, ref, inject } from "vue";
import { FormItem, key } from "./type";
import { useEventHub } from "../utils";

interface Props{
  label?:string;
  prop?:string;
}
const props = withDefaults(defineProps<Props>(), {
  label: "", prop: ""
});
const eventHub = useEventHub();
const error = ref("");
const formData = inject(key);
const o:FormItem = {
  validate
};

function validate() {
  if (!formData?.rules) {
    return Promise.resolve({ result: true });
  }

  const rules = formData.rules[props.prop];
  const value = formData.model[props.prop];
  const schema = new Schema({ [props.prop]: rules });
  return schema.validate({ [props.prop]: value }, (err) => {
    if (err) {
      error.value = err[0].message || "校验错误";
    } else {
      error.value = "";
    }
  });
}


onMounted(() => {
  if (props.prop) {
    eventHub.on("validate", () => {
      validate();
    });
    eventHub.emit("addFormItem", o);
  }
});

defineExpose(o);
</script>

<style lang="scss">
@import '../styles/mixins';
@include b(form-item) {
  margin-bottom: 22px;
  label{
    line-height:1.2;
    margin-bottom:5px;
    display: inline-block;
  }
  & .el-form-item {
    margin-bottom: 0;
  }
}
.error{
  color:red;
}
</style>